<template>
  <div class="con">
    <el-container>
      <el-container>
        <el-container>
          <el-main style="padding:0;">
            <!-- 放置内容区 -->
            <div class="contbox6_10" v-loading="listLoading">
              <!-- 机构列表 -->
              <p class="titlelist6_10">
                结算信息
                <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>充值
              </p>
              <div class="content">
              <p class="sizes">充值</p>
              <el-divider></el-divider>
             
              <el-form
                :model="ruleForm"
                label-position="left"
                :hide-required-asterisk="true"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="账户号码：">{{
                  fromData.withdrawBank
                }}</el-form-item>
                <el-form-item label="充值金额" prop="password">
                  <el-input
                    class="ipt"
                    type="number"
                    v-model="ruleForm.rechargeAmount"
                    placeholder="请输入充值金额"
                  ></el-input>
                </el-form-item>
                <el-form-item label="充值截图" prop="password">
                  <el-upload
                    :action="'/api/fileUpload'"
                    name="file"
                    :file-list="imgData"
                    :limit="1"
                    list-type="picture-card"
                    accept=".jpg,.png,.JPG,.PNG"
                    :before-upload="beforeUpload"
                    :on-success="handleSuccess"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                  <p class="el_p">只能上传jpg/png文件，且不超过500kb</p>
                </el-form-item>
                <p class="itemp">
                  <i class="el-icon-document-checked"></i
                  >通过本页面提交充值信息，平台审核后，电子账户金额更新为最新余额（充值余额/余额要与截图金额一致）
                </p>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                  >
                </el-form-item>
              </el-form>
               <div class="divs">
                <p>收款方：{{ fromData.bankAccountName }}</p>
                <p>收款账户：{{ fromData.bankAccountCode }}</p>
                <p>收款银行：{{ fromData.bankName }}</p>
              </div>
            </div>

              </div>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import https from "../../plugins/https";
export default {
  name: "route",
  data() {
    return {
      checked: false,
      dialogImageUrl: "",
      dialogVisible: false,
      ruleForm: {
        rechargeAmount: "",
        rechargePhoto: ""
      },
      listLoading: false,
      fromData: {},
      imgData: []
    };
  },
  components: {},
  mounted() {
    this.withdrawForms();
  },
  methods: {
    // 图片上传
    beforeUpload(file) {
      let islt1M = file.size / 1024 / 1024 < 1000;
      if (!islt1M) {
        layer.open({
              content: "上传图片大小不能超过1M",
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
        // this.$notify({
        //   title: "错误",
        //   message: ,
        //   type: "error"
        // });
        return false;
      }
    },
    withdrawForms() {
      this.listLoading = true;
      https
        .withdrawForm({ officeUid: localStorage.getItem("uid") })
        .then(res => {
          if (res.data.code !== "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
            // this.$notify({
            //   title: "错误",
            //   message: res.data.msg,
            //   type: "error"
            // });
            this.listLoading = false;
            return;
          }
          this.fromData = res.data.dowithdrawReponse;
          this.listLoading = false;
        });
    },
    // 点击提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.rechargeAmount == "")
            return layer.open({
              content: "请输入充值金额",
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
            // this.$notify({
            //   title: "错误",
            //   message: ,
            //   type: "error"
            // });
          if (+this.ruleForm.rechargeAmount < 1)
            return layer.open({
              content: "请输入正确充值金额",
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
            // this.$notify({
            //   title: "错误",
            //   message: ,
            //   type: "error"
            // });
          if (this.ruleForm.rechargePhoto == "")
            return layer.open({
              content: "请上传截图",
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
            // this.$notify({
            //   title: "错误",
            //   message: ,
            //   type: "error"
            // });
          let pl = {
            officeUid: localStorage.getItem("uid"),
            rechargeAmount: this.ruleForm.rechargeAmount,
            rechargePhoto: this.ruleForm.rechargePhoto
          };
          this.listLoading = true;
          https.doRecharge(pl).then(res => {
            if (res.data.code !== "0000") {
              layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
              // this.$notify({
              //   title: "错误",
              //   message: res.data.msg,
              //   type: "error"
              // });
              this.listLoading = false;
              return;
            }
            this.listLoading = false;
            this.ruleForm.rechargeAmount = "";
            this.ruleForm.rechargePhoto = "";
            this.imgData = [];
            this.$confirm("充值申请已提交，【充值提现记录】可查进度", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.$router.push({ path: "/moneyWithdrawal" });
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 图片删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.rechargePhoto = "";
      this.imgData = [];
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      console.log(33, res, file, fileList);
      this.ruleForm.rechargePhoto = res.data.filePath;
      this.imgData = fileList;
    }
  }
};
</script>

<style scoped>
.content{
  min-width: calc(100% - 40px);
  padding: 0 20px
}
.con{
  position: relative;
}
.demo-ruleForm {
  float: left;
}
.el_p {
  font-size: 12px;
  color: #999;
}
.divs {
  /* width: auto; */
  display: inline-block;
  width: 300px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  float: left;
  margin-top: 30px;
}
.divs p {
  font-size: 14px;
  line-height: 30px;
}
.itemp {
  font-size: 11px;
  margin-bottom: 30px;
  color: #999;
}
.el-form-item{
  width:350px;
  float: left;
}
.el-icon-document-checked {
  position: relative;
  top: 4px;
  display: inline-block;
  color: #409eff;
  font-size: 25px;
  margin-right: 5px;
}
.ipt {
  width: 194px;
}
.sizes {
  font-size: 15px;
  margin-bottom: 20px;
  color: #999;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.avatar-uploader .el-upload {
  border: 1px dashed red;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
